<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 p-4">
    <div class="max-w-md w-full">
      <el-card class="backdrop-blur-md bg-white/90 shadow-2xl rounded-2xl border-0">
        <div class="text-center mb-8">
          <div class="flex justify-center mb-6">
            <div class="w-20 h-20 bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl flex items-center justify-center transform rotate-12 hover:rotate-0 transition-transform duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </div>
          </div>
          <h2 class="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">AI Assistant</h2>
          <p class="text-gray-600 mt-2 text-sm">登录以开始智能对话</p>
        </div>

        <el-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          @submit.prevent="handleLogin"
          class="space-y-6"
        >
          <el-form-item prop="email" class="mb-6">
            <el-input
              v-model="formData.email"
              type="email"
              placeholder="请输入邮箱"
              :prefix-icon="UserFilled"
              class="rounded-lg hover:border-blue-500 transition-colors duration-300"
            />
          </el-form-item>

          <el-form-item prop="password" class="mb-6">
            <el-input
              v-model="formData.password"
              type="password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              show-password
              class="rounded-lg hover:border-blue-500 transition-colors duration-300"
            />
          </el-form-item>

          <div class="flex items-center justify-between mb-6">
            <el-checkbox v-model="formData.rememberMe" class="text-gray-600">
              记住我
            </el-checkbox>
            <el-link type="primary" class="hover:text-blue-700 transition-colors duration-300">
              忘记密码？
            </el-link>
          </div>

          <el-button
            type="primary"
            @click="handleLogin"
            class="w-full h-12 text-lg font-medium rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 border-0 hover:opacity-90 transition-opacity duration-300"
            :loading="loading"
          >
            登录
          </el-button>
        </el-form>

        <div class="text-center mt-8">
          <p class="text-gray-600">
            还没有账号？
            <el-link type="primary" class="font-medium hover:text-blue-700 transition-colors duration-300">
              立即注册
            </el-link>
          </p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { UserFilled, Lock } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { authApi } from '@/api/auth'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const formRef = ref<FormInstance>()
const loading = ref(false)

const formData = reactive({
  email: '123456@qq.com',
  password: '123456',
  rememberMe: false
})

const rules = reactive<FormRules>({
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ]
})

const handleLogin = async () => {
  if (!formRef.value) return
  
  try {
    loading.value = true
    await formRef.value.validate()
    
    const response = await authApi.login(
      formData.email,
      formData.password,
      formData.rememberMe
    )
    
    // 保存token到本地存储
    localStorage.setItem('token', response.token)
    
    // 显示成功消息
    ElMessage.success('登录成功')
    
    // 登录成功后跳转到首页
    router.push('/')
  } catch (error: any) {
    console.error('登录失败:', error)
    ElMessage.error(error.response?.data?.message || '登录失败，请稍后重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
:deep(.el-input__wrapper) {
  background-color: transparent;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px var(--el-color-primary) !important;
}

:deep(.el-card) {
  border: none;
  backdrop-filter: blur(16px);
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 1rem;
}

:deep(.el-button--primary) {
  background: linear-gradient(to right, var(--el-color-primary), #8B5CF6);
  border: none;
  height: 48px;
  font-size: 1.125rem;
  font-weight: 500;
  transition: opacity 0.3s ease;
}

:deep(.el-button--primary:hover) {
  opacity: 0.9;
}

:deep(.el-checkbox__label) {
  color: #4B5563;
}
</style>